<!--
 * Date: 2018年05月23日 13:53:57
 * LastEditors  : lvyou
 * LastEditTime : 2020年01月14日 12:02:04
 * FilePath: \youlinweb-master\src\pages\mine\mine.vue
 * copyright(c) 2019-2025 版权为浙江双城网络科技集团有限公司所有，违者必究。
 -->
<template>
<div>
  <ylheader :title="'我的'"></ylheader>
    <router-link to="/personalinfor">
      <div class="avatar_fa">
        <div class="avatartop v-c">
          <div class="pendant-contaner">
            <img :src="headimg" class="avatar" :class="{avatar_border:pendantType==0}" >
            <img :src="pendantImg" class="pendantImg"   v-if="pendantImg">
            <img src="~img/daren.png" class="daren" v-if="isTalent==1"> 
          </div>
          <span >{{name}}</span>
        </div>
        <i class="yl-2list-r avataricon" ></i>
      </div>   
    </router-link>
  <pull-to-refresh :disablePulldown="true" :disablePullup="true" class="comment-page" >
    <ul class="mine_ul">
        <li class="mine_ul_li" v-for="(items,index) in titlearray" :key="index" @click="godetail(index)" :style="{'border-bottom':index==(titlearray.length-1)||index==0||index==6?'none':'1px solid #e6e6e6',
        'margin-bottom':index==0||index==6?'0.2rem':'0px'}">
            <div class="mine_ul_div">
                <div class="mine_ul_tlte_fa">
                  <span class="mine_ul_left" :class="[items.iconclass,{li_icon:index==6,left_icon:(index==0||index==6||index==7),pr25:index==3}]"></span>
                  <span class="mine_ul_title">{{items.title}}</span>
                </div>
                <div class="a-c">
                  <span v-if="index==0" class="l-g">{{coin}}</span>
                  <span class="yl-2r mine_ul_right" ></span>
                </div>
          </div>
        </li>
    </ul>
  <div class="privacy-policy"   @click="showPrivacys">《隐私政策》</div>
  </pull-to-refresh>
  <indexnavigation></indexnavigation>
</div>
</template>
<script>
import indexnavigation from "src/components/index/indexnavigation.vue";
import ylheader from "src/components/yl-header.vue";
import PullToRefresh from 'src/components/pull-to-refresh'
import api from "src/api/index";
import { mapState, mapMutations } from "vuex";
export default {
  name:"mines",
  data(){
    return{
        coin:"",
        headimg:localStorage.getItem("headImg"),
        name:localStorage.getItem("nickName"),
        titlearray:[{"title":"我的绿币","iconclass":"yl-jf-b"},{"title":"我的奖品","iconclass":"yl-my-jiang"},{"title":"我的试吃试用","iconclass":"yl-my-baogao"},{"title":"我的投稿","iconclass":"yl-my-txt"},{"title":"我发布的","iconclass":"yl-fabu"},{"title":"我参与的","iconclass":"yl-canyu"},{"title":"收藏","iconclass":"yl-2gz"},{"title":"使用帮助","iconclass":"yl-Help"}],
        isTalent:0,
        pendantImg:"",
        pendantType:0,//头像挂件，0无，1圣诞，2元旦，3新年，4元宵
    }
  },
  components:{
    indexnavigation,
    ylheader,
    api,
    PullToRefresh
  },
  computed: {
    ...mapState(["collectionselected","interactionSelected","usercoin"])
  },
  mounted(){
       this.getcoin();
  },
  methods:{
    ...mapMutations(["changecollectionselected","changeinteractionSelected",'changeusercoin']),
      godetail(index){
          switch(index){
            case 0:
            this.$router.push({path:'/pointsmall'});
            break;
            case 1:
            // this.changeinteractionSelected(1);
            this.$router.push({path:'/exchangerecode',query:{tag:0}});
            break;
            case 2:
            this.$router.push({path:'/tryoutgoodslist',query:{tag:1}});
            break;
            case 3:
            this.$router.push({path:'/mysubmission'});
            break;
            case 4:
            this.$router.push({path:'/myPublish'});
            break;
            case 5:
            // this.changeinteractionSelected(1);
            this.$router.push({path:'/myParticipate'});
            break;
            case 6:
            this.changecollectionselected(0);
            this.$router.push({path:'/collection'});
            break;
            case 7:
            this.$router.push({path:'/usehelp'});
            break;
            default:
            break;
          }  
      },
      getcoin(){
          api.QuerygetUserId().then(res => {
            if(res.success){
                this.coin = res.userinfo.coin;
                this.isTalent = res.userinfo.isTalent;
                this.pendantType = res.userinfo.pendantType;
                if(this.pendantType!=0&&res.userinfo.pendantPicUrl!=null){
                  this.pendantImg = res.userinfo.pendantPicUrl;
                }else{
                  this.getPendantImg()
                }
                this.changeusercoin(this.coin);
            }
          })
      },
        getPendantImg(){//头像挂件，0无，1圣诞，2元旦，3新年，4元宵
          switch (this.pendantType){
            case 1:
             this.pendantImg="https://youlingqinius.wonderlandnet.cn/youlin-shengdan@2x.png"
            break;
            case 2:
             this.pendantImg="https://youlingqinius.wonderlandnet.cn/youlin-yuandan@2x.png"
            break;
            case 3:
             this.pendantImg="https://youlingqinius.wonderlandnet.cn/youlin-chunjie@2x.png"
            break;
            case 4:
             this.pendantImg="https://youlingqinius.wonderlandnet.cn/youlin-yuanxiao@2x.png"
            break;
            default:
            break;
          }
      },
      showPrivacys(){
         this.$router.push({path:'/activityrule',query:{tag:10}});
      }
  }
}
</script>

<style lang="less" scoped>
.pendantImg{
  width: 2.16rem;
  position: absolute; 
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.avatar_fa{
  position: relative;
    height: 3.12rem;
    width: 100%;
    background: linear-gradient(to right, #fd996d, #ff5c5c);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    font-size: 0.32rem;
    font-family: PingFangSC-Medium, sans-serif;
    color:#fff;
}
 .avatar{
    width: 1.72rem;
    height: 1.72rem;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
  }
  .avatar_border{
    border: solid 0.08rem #ffffff;
  }
  .l-g{
    margin-right: 0.2rem;
    color: #fb685b;
  }
  .avatartop{
    position: relative;
    flex-direction: column;
    margin-bottom: 0.3rem;
    .daren{
      width: 0.36rem;
      height: 0.36rem;
      position: absolute;
      right: 0.25rem;
      bottom: 0.25rem;
    }
    .pendant-contaner{
      position: relative;
      width: 2.16rem;
      height: 2.16rem;
    }
    .mt30{
      margin-top: -0.2rem
    }
  }
  .pendant_yuanxiao{
    right: 0.2rem!important;
    bottom: 0.34rem!important
  }
  .pendant_yuandan{
    right: 0.05rem!important;
    bottom: 0.14rem!important
  }
  .avataricon{
    position: absolute;
    right: 0.2rem;
    bottom: 1.55rem;
    font-size: 0.48rem;
    color: white;
  }
  .pr25{
    padding-right: 0.25rem
  }

</style>
<style lang="less" >
.privacy-policy {
  width: 100%;
  text-align: center;
  font-size: 0.2rem;
  color: #5C5E7C;
  position: absolute;
  bottom: 110px;
}
</style>
